<template>
    <div>
        <div class="header">
            <input type="text" placeholder="请输入名字" v-model="user">
            <input type="text" placeholder="请输入账号" v-model="tit">
            <button @click="add">提交</button>
        </div>
         <div class="con">
            <List :datas="datas"/>
        </div>
    </div>
</template>

<script>

import {mapMutations,mapState} from "vuex"
import List from "@/components/list.vue"
export default {
    name:"Ipt",
    data(){
        return {
            user:'',
            tit:''
        }
    },
    computed:{
        ...mapState(["datas"])
    },
    methods:{
        // ...mapMutations(["add"])
        add(){  //添加
             this.$store.commit("add",{
                user:this.user,
                tit:this.tit,
                id:new Date()*1,
                "flag":false,
             })
        }
    },
    components:{
       List
    }
}
</script>
<style scoped  lang="scss">
    .header{
        height: 44px;
        line-height: 44px;
        display: flex;
        justify-content: space-around;
        input{
            margin: 5px 15px;
        }
        button{
            margin:5px 0;
            padding: 0 20px;
        }
    }
</style>